<template>
  <div id="order-page" v-loading="myLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
       :style="{
    minHeight:(this.getWinSize().height-50-this.getSafeArea().top)+'px',
  }">
    <div id="search-bar" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div class="left back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <div id="search-box">
        <div id="search-input-outer">
          <i class="icon iconfont icon-sousuo"></i>
          <el-input type="text" class="search-bar-input" v-model="searchForm.productName" clearable
                 placeholder="搜索你买过的商品..."/>
          <el-button type="danger" id="search-button" @click="getOrderList">搜索</el-button>
          <!--时间筛选-->
          <div class="datetime" v-show="false" v-if="searchForm.createdAt && searchForm.createdAt.length>0">
            <span class="ovd_s" v-text="searchForm.createdAt"  @click="chooseDateTime"></span>
<!--            <i class="el-icon-close" @click="setSearchDateTime('')"></i>-->
          </div>
          <!--积分订单筛选-->
<!--          <div class="score-order ovd_s" v-if="searchForm.isScoreOrder==1" :class="{'no-created-at':(!searchForm.createdAt || searchForm.createdAt.length===0)}" @click="chooseDateTime">-->
          <div v-show="false" class="score-order ovd_s no-created-at" v-if="searchForm.isScoreOrder==1" @click="chooseDateTime">
            积分订单
<!--            <i class="el-icon-close" @click="setSearchIsScoreOrder('')"></i>-->
          </div>
          <div class="c"></div>
        </div>
        <div id="datetime-button" @click="chooseDateTime">
          筛选
        </div>
        <div class="c"></div>
      </div>
    </div>

    <div id="status-bar" :style="{top:(this.getSafeArea().top+40-4)+'px'}">
      <div class="item" v-for="(item,index) in statusArr" :key="index" :class="searchForm.status===item.key?'curr':''"
           @click="changeStatus(item.key)">
        <span v-text="item.name"></span>
      </div>
    </div>

    <i-scroller-box
      class="order-list"
      ref="i-scroller-box"
      url="Order/getList"
      style="position: relative;"
      :height="getWinSize().height-130-this.getSafeArea().top"
      :style="{
        top:(this.getSafeArea().top)+'px',
       width:'100%'}">

      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index">
          <div class="top">
            <div class="shop-box">
              <div class="shop-logo">
                <img :src="data.shopLogo" alt="">
              </div>
              <div class="shop-name" v-text="data.shopName"></div>
              <i class="el-icon-arrow-right"></i>
            </div>
            <div class="status-box">
              <el-tag v-if="data.orderGroupId!=null" v-text="data.orderGroupStatus.name"></el-tag>

              <span v-if="(data.payType && searchForm.status!=='apply') || data.status.id===7" v-text="data.status.name"></span>
              <span v-if="searchForm.status==='apply'" v-text="data.applyStatus.name"></span>
            </div>
          </div>

          <div class="middle" @click="$router.push({name:'OrderDetail',query:{id:data.id}})">
            <div class="right">
              <div class="line1">
                <div class="item" v-for="(product,index) in data.productData">
                  <div class="img">
                    <img :src="product.image" alt="" style="max-height: 25px;">
                  </div>
                  <div class="name">
                    <span class="ovd_s" v-text="product.name"></span>
                  </div>
                  <div class="model">
                    <span v-text="product.model"></span>
                  </div>
                  <div class="price" align="right">
                    <span class="b red">￥{{ ToMoney(product.price) }}</span>
                    × {{ product.nums }}
                  </div>
                </div>
              </div>
              <div class="line2">

                <div class="datetime">
                  {{ data.createdAt }}
                </div>
                <div class="group-info">
                  <div>
                    <span class="green score-box" v-if="data.score>0">积分: {{ data.score }} </span>
                    <span class="b red price-box">￥{{ ToMoney(data.price) }}</span>
                  </div>
                </div>
              </div>
              <div class="c"></div>
            </div>
          </div>

          <div class="bottom" align="right">
            <order-act-button :call-back="getOrderList" :curr-order-params="data"/>
          </div>
        </div>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import OrderActButton from '../common/OrderActButton'
import IScrollerBox from '../common/IScrollerBox'

export default {
  name: 'Order',
  components: {IScrollerBox, OrderActButton},
  data: function () {
    return {
      searchForm: {
        isScoreOrder: '',
        productName: '',
        status: '',
        createdAt: '',
      },
      statusArr: [],
      currStatus: '',
      orderList: [],
      myLoading: false,
    }
  },
  mounted () {
    this.statusArr = [{
      'key': '',
      'name': '全部'
    }].concat(dict.OrderStatusNameArr)
    if (this.$route.query.status && this.$route.query.status !== '') {
      this.searchForm.status = this.$route.query.status
    }
    if (this.$route.query.isScoreOrder && this.$route.query.isScoreOrder !== '') {
      this.searchForm.isScoreOrder = this.$route.query.isScoreOrder
    }

    this.getOrderList()

    let $this = this
    window.onscroll = function () {
      let scrollPos = $this.getScrollTop()
      let maxHeight = $this.getScrollHeight() - $this.getWinSize().height
      if (scrollPos === 0) {
        // 到达顶部
        // $this.getOrderList()
      }
      // 到达底部
      if (maxHeight - scrollPos <= 0) {
        console.log('到达底部')
        $this.getOrderList()
      }
    }
  },
  destroyed () {
    window.onscroll = null
  },
  methods: {
    chooseDateTime: function () {
      this.bus.$emit('ChooseOrderSearchDialogCallBus', this.setSearchDateTime, this.searchForm.createdAt, this.searchForm.isScoreOrder)
    },
    setSearchDateTime: function (dateTime,isScoreOrder) {
      this.searchForm.createdAt = dateTime
      this.searchForm.isScoreOrder = isScoreOrder?1:0
      this.getOrderList()
    },
    setSearchIsScoreOrder: function (isScoreOrder) {
      this.searchForm.isScoreOrder = isScoreOrder?1:0
      this.getOrderList()
    },
    changeStatus: function (status) {
      this.searchForm.status = status
      this.getOrderList()
    },
    getOrderList: function () {
      this.searchForm.isScoreOrder=(this.searchForm.isScoreOrder==1)?1:0
      this.$refs['i-scroller-box'].getList({
        page: 1,
        form: this.searchForm
      })
    },
  }
}
</script>

<style scoped>

</style>
